<template>
	<div class="q-pa-md">
		<q-table title="明细信息123" :rows="rows" :columns="columns" :pagination="paginationOptions" row-key="name">
			<template v-slot:top-right>
				<div class="flex items-center">
					<q-input filled v-model="dateText" dense class="q-mr-sm custom-input-height">
						<template v-slot:append>
							<q-icon name="event" class="cursor-pointer">
								<q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="datePopup">
									<q-date v-model="dateRangeText" range @range-end="ss" @input="closeDatePopup"
										mask="YYYY-MM-DD">
									</q-date>
								</q-popup-proxy>
							</q-icon>
						</template>
					</q-input>
					<q-btn color="primary" icon-right="archive" label="导出" no-caps @click="exportTable"
						class="custom-btn-height" />
				</div>
			</template>
			<template v-slot:header="props">
				<q-tr :props="props">
					<q-th auto-width />
					<q-th v-for="col in props.cols" :key="col.name" :props="props">
						{{ col.label }}
					</q-th>
				</q-tr>
			</template>
			<template v-slot:body="props">
				<q-tr :props="props">
					<q-td auto-width>
						<q-btn round color="primary" icon="mdi-loupe" size="md" @click="dd(props.row)" />
					</q-td>
					<q-td v-for="col in props.cols" :key="col.name" :props="props">
						{{ col.value }}
					</q-td>
				</q-tr>
			</template>
		</q-table>
	</div>
</template>

<script>
import { exportFile } from 'quasar';
import { v } from 'vxe-table';

// 封装的 CSV 值包装函数
const wrapCsvValue = (val, formatFn, row) => {
	let formatted = typeof formatFn === 'function' ? formatFn(val, row) : val;
	formatted = formatted === undefined || formatted === null ? '' : String(formatted);
	return `"${formatted.split('"').join('""')}"`;
};

export default {
	data() {
		return {
			// 分页选项
			paginationOptions: {
				rowsPerPage: 10,
			},
			// 表格列定义
			columns: [
				{
					name: "业务员",
					label: "业务员",
					field: "业务员",
					align: "center",
					sortable: true,
				},
				{
					name: "部门",
					label: "部门",
					field: "部门",
					align: "center",
					sortable: true,
				},
				{
					name: "销售量",
					label: "销售量",
					field: "销售量",
					align: "center",
					sortable: true,
				},
				{
					name: "自营销售量",
					label: "自营销售量",
					field: "自营销售量",
					align: "center",
					sortable: true,
				},
				{
					name: "终端销售量",
					label: "终端销售量",
					field: "终端销售量",
					align: "center",
					sortable: true,
				},
			],
			// 表格显示的行数据
			rows: [],
			showDialog: false,
			startDate: '',
			endDate: '',
			dateRangeText: '',
			dateText: ''
		};
	},
	async mounted() {
		try {
			this.$q.loading.show();
			// 调用 API 获取数据
			//this.rows = await this.$API.free.wangfang1.get();
		} catch (error) {
			// 处理数据获取失败的情况
			console.error('Failed to fetch data:', error);
			this.$q.notify({
				message: '数据获取失败，请稍后重试',
				color: 'negative',
				icon: 'warning',
			});
		} finally {
			// 隐藏加载提示
			this.$q.loading.hide();
		}
	},
	methods: {
		dd(row) {
			console.log(row);
		},
		async ss(val) {
			console.log(val);
			if (val.from.month < 10) {
				val.from.month = '0' + val.from.month;
			}
			if (val.from.day < 10) {
				val.from.day = '0' + val.from.day;
			}
			if (val.to.month < 10) {
				val.to.month = '0' + val.to.month;
			}
			if (val.to.day < 10) {
				val.to.day = '0' + val.to.day;
			}
			var start = val.from.year + '-' + val.from.month + '-' + val.from.day;
			var end = val.to.year + '-' + val.to.month + '-' + val.to.day;
			this.dateText = start + ' 至 ' + end;
			this.dateRangeText = { from: start, to: end };
			try {
				this.$q.loading.show();
				// 调用 API 获取数据
				this.rows = await this.$API.free.wangfang2.get(this.dateRangeText);
			} catch (error) {
				// 处理数据获取失败的情况
				console.error('Failed to fetch data:', error);
				this.$q.notify({
					message: '数据获取失败，请稍后重试',
					color: 'negative',
					icon: 'warning',
				});
			} finally {
				// 隐藏加载提示
				this.$q.loading.hide();
			}
			this.$refs.datePopup.hide();
		},
		closeDatePopup() {
			this.$refs.datePopup.hide();
		},
		exportTable() {
			try {
				let filteredRows = this.rows;
				if (this.dateRangeText.length === 2) {
					const startDate = new Date(this.dateRangeText[0]);
					const endDate = new Date(this.dateRangeText[1]);
					// 假设数据中有一个日期字段 'date'，需要根据实际情况修改
					filteredRows = this.rows.filter(row => {
						const rowDate = new Date(row.date);
						return rowDate >= startDate && rowDate <= endDate;
					});
				}

				const headers = this.columns.map((col) => wrapCsvValue(col.label));
				const dataRows = filteredRows.map((row) =>
					this.columns
						.map((col) =>
							wrapCsvValue(
								typeof col.field === 'function' ? col.field(row) : row[col.field || col.name],
								col.format,
								row
							)
						)
						.join(',')
				);
				const content = [headers, ...dataRows].join('\r\n');

				const status = exportFile('table-export.csv', content, 'text/csv');

				if (!status) {
					this.$q.notify({
						message: '浏览器拒绝文件下载，请检查浏览器设置',
						color: 'negative',
						icon: 'warning',
					});
				}
			} catch (error) {
				console.error('Export failed:', error);
				this.$q.notify({
					message: '导出文件时出现错误，请稍后重试',
					color: 'negative',
					icon: 'warning',
				});
			}
		},
	},
};
</script>

<style>


/* 添加高度统一样式 */
.custom-input-height .q-field__control {
  height: 40px !important;
}

/* 原有高度样式保持不变 */
.custom-btn-height {
  height: 40px;
  padding: 0 16px;
  /* 新增美化样式 */
  background: linear-gradient(145deg, #4a8cff, #0066ff);
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 102, 255, 0.2);
  position: relative;
  overflow: hidden;
}

/* 悬停效果 */
.custom-btn-height:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

/* 点击效果 */
.custom-btn-height:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 102, 255, 0.2);
}

/* 图标动画效果 */
.custom-btn-height .q-btn__content i {
  transition: transform 0.3s ease;
  margin-left: 4px;
}

.custom-btn-height:hover .q-btn__content i {
  transform: translateX(3px);
}

/* 添加流光效果 */
.custom-btn-height::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  animation: btnShine 3s infinite;
}

@keyframes btnShine {
  100% {
    left: 100%;
  }
}

/* 新增渐变浮动动画 */
.filter-container {
	background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
	box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.1);
	border-radius: 12px;
	margin: 12px;
	padding: 20px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 表格标题动态效果 */
.table-title {
	background: linear-gradient(45deg, #667eea, #764ba2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	position: relative;
	animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
	from {
		text-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
	}

	to {
		text-shadow: 0 0 20px rgba(118, 75, 178, 0.5);
	}
}

/* 新增骨架屏加载效果 */
.q-table__loading {
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(241, 243, 255, 0.5) 50%,
			rgba(255, 255, 255, 0) 100%);
	background-size: 200% 100%;
	animation: skeletonLoading 1.5s infinite;
}

@keyframes skeletonLoading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* 优化行悬停效果 */
.hover-row:hover td {
	transform: translateX(8px);
	box-shadow: -4px 0 12px rgba(102, 126, 234, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 新增单元格悬浮放大效果 */
.q-td {
	transition: transform 0.2s ease;
	cursor: pointer;

	&:hover {
		transform: scale(1.05);
		z-index: 1;
	}
}

/* 优化斑马纹样式 */
.q-table tbody tr:nth-child(even) {
	background-color: rgba(248, 249, 250, 0.6);
	backdrop-filter: blur(2px);
}

/* 新增数据加载动画 */
@keyframes fadeInRow {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.q-tr {
	animation: fadeInRow 0.6s ease forwards;
	opacity: 0;
}

/* 优化筛选控件互动 */
.q-input:hover .q-field__control {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

/* 新增分页动效 */
.q-pagination__button {
	transition: all 0.3s ease;

	&:hover {
		transform: rotate(8deg);
		background: linear-gradient(145deg, #667eea, #764ba2);
	}
}
</style>

<style>
/* 修改原有阴影样式 */
.custom-btn-height {
  /* ... 其他样式保持不变 ... */
  box-shadow: 0 3px 12px rgba(0, 102, 255, 0.25),
              0 6px 20px rgba(0, 102, 255, 0.15),
              inset 0 -2px 4px rgba(255, 255, 255, 0.3); /* 新增三层阴影 */
}

.custom-btn-height:hover {
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.35),
              0 10px 30px rgba(0, 102, 255, 0.25),
              inset 0 -2px 6px rgba(255, 255, 255, 0.4); /* 悬停时阴影扩散 */
}

.custom-btn-height:active {
  box-shadow: 0 1px 4px rgba(0, 102, 255, 0.2),
              inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 点击时模拟凹陷效果 */
}
</style>
